LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

hexo-theme-particle 的使用说明

2021/9/18

hexo-theme-particle

介绍:hexo 主题 particle,诞生原因是因为建多了两个博客,所以自己开发了这个主题来作为 3 个博客的主题

目前有 full、night 和 maiden 两个主题样式

演示地址(可访问)

full 主题演示地址

korilin 中文技术博客:https://korilin.github.io/hexo-theme-particle-demo/full/public

night 主题演示地址

korilin 英文技术博客:https://en.korilin.com

maiden 主题演示地址

こおり 日语记录博客:https://jp.korilin.com

主题安装

进入主题目录后,克隆此仓库

cd theme
git clone https://github.com/korilin/hexo-theme-particle.git particle

关闭 Hexo 自带 highlight

到博客根目录下的_config.yml,将 highlight 下的 enable 设置为 false,如下:

# _config.yml
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ""
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ""

修改完请清除缓存

$ hexo cl
$ hexo g

配置文件说明


language: 站点语言

# 站点图标 && 侧边信息卡片头像
head_img: /images/avatar.png

# 开启主页顶部信息块
head_block_enable: true

如果使用图片来作为背景,请使用 background-image 属性,不要使用 background 属性。

并且记得不要忘记加上双引号,否则可能会出现错误

# 主页顶部背景样式
# 正确示例如下:
# 图片背景: home_background: "background-image:url('../home.jpg')"
# 颜色背景: home_background: "background:black"
home_background: "background-image:url('../home.jpg')"

导航栏配置

主题引入了 Vue.js 和 Ant Design Vue

为了减少主题体积和方便性,主题使用的图标为 Ant Design Vue 的图标

图标地址为:https://www.antdv.com/components/icon-cn/

使用前需要确定该图标是否有 theme 属性,如果没有请让对应 icon 下的 theme 为空

# 导航栏链接
menu:
  链接文本:
    icon:
      name: Antd 图标名字
      theme: Antd 图标的样式,目前支持官方的 outlined | filled 这两种样式
    scr: 链接地址,可站内相对/绝对链接,也可站外链接
  home:
    icon:
      name: home
      theme: filled
    src: /
  categories:
    icon:
      name: book
      theme: filled
    src: /categories
  tags:
    icon:
      name: tags
      theme: filled
    src: /tags
  英文博客:
    icon:
      name: compass
      theme: filled
    src: https://en.korilin.com

文章旁边的信息卡片

图标链接可通过 type 指定图标类型(Antd 图标或者自定义图片)

指定为 Antd 图标主题将会读取 name 和 theme 属性创建 Antd 图标

使用自定义图片将会读取 src 属性创建 118*18 的图片图标。

# 文章侧边信息卡片
card:
  # 是否开启
  enable: true
  # 作者名称下面的简介,必须为列表,每一项作为单独一行。
  description: ["正しさなんてもの", "人のモノサシによって変わる"]
  # 图标链接
  icon_links:
    github:
      icon:
        type: antd-icon # 图标类型 antd-icon | img
        name: github # Antd 图标名字
        theme: filled # 图标样式 outlined | filled
        src: # 图片地址  antd-icon 类型可不填
      link: https://github.com/arukione
    twitter:
      icon:
        type: antd-icon
        name: twitter
        theme: # twitter 这个图标没有 theme 这一属性
      link: https://twitter.com/korilin_dev
    netease:
      icon:
        type: img # 自定义图片
        src: /images/icon/netease.png # 图片地址
      link: https://music.163.com/#/user/home?id=333601794
  # 友链
  friend_links:
    英文技术博客: https://en.korilin.com
    日语记录博客: https://en.korilin.com

站点 footer 配置:

考虑到博客部署在服务器并使用自己域名的情况,按国家规定需要在网站下边添加备案消息

如没有需要显示备案消息的可以关闭

# 页面尾部,建站时间
footer:
  since: 2018
  # 服务器自定义域名备案底部字段
  ICP:
    enable: true
    code: 粤ICP备xxxxxx号

本主题引入的是 Gitalk 评论系统,默认开启,之前可以使用,但是现在我自己的博客用不了了,我还没去找原因 …

# Gitalk 评论系统
gitalk:
  enable: true # true
  clientID:  # 在 Github 申请的客户端ID
  clientSecret:  # 客户端密钥
  repo: # 存放的仓库
  owner:  # 所有者的 GitHub ID
  admin:  # 管理者的 GitHub ID / 和上面一样就好了

主题样式

本主题有多种配色可以选择

目前有 full、night 和 maiden 三种样式,不填或者填错默认为 full

style: full # full | night | maiden

配色修改文件

本主题采用 stylus 来编写样式,并且将配色分离出来,三种主题的配置对应 3 种配色,如有需要可以直接在主题的 css 目录中对应的配色文件修改配色

主题的source/css目录下对应的 xxx-color.styl

  • full 主题配色文件:full-color.styl
  • ngiht 主题配色文件:night-color.styl
  • maiden 主题配色文件:maiden-color.styl

本主题会根据主题配置文件的style配置项的值,在source/layout/layout.ejs中引入对应的样式文件xxx-theme.styl

主题的样式文件有很多,但最终都会被引入一个 theme 文件,其中particle.styl文件会引入除了配色文件外的所有样式文件,而xxx-theme.styl文件会引入particle.styl文件和对应的xxx-color.styl配色文件,从而达到切换样式的效果。

修改的 ejs 代码如下:

<% if(theme.style == "night"){ %>
  <link rel="stylesheet" href="/css/night-theme.css">
<% }else if(theme.style == "maiden"){ %>
  <link rel="stylesheet" href="/css/maiden-theme.css">
<% }else{ %>
  <link rel="stylesheet" href="/css/full-theme.css">
<% } %>

因此,如果想保留主题提供的配色,引入新的配色,可以在 css 目录下,新建一个new-theme.styl(文件名可自己定)和new-color.styl(文件名可自己定)文件,然后在new-theme.styl文件里添加以下内容来引入particle.stylnew-theme.styl文件

@import './new-color'
@import './particle'

接着你需要在source/layout/layout.ejs里,添加类似下面的判断语句来引入新主题

它如同 JavaScript 语法,但相关的语法就会 <% %>包裹起来

<% if(theme.style == "new"){ %>
  <link rel="stylesheet" href="/css/new-theme.css">
<% } %>

你需要在<head> ... </head>中引入样式文件的配置文件判断语句部分进行修改,在添加 full 主题的else语句前,再添加一个else if判断语句来引入新主题,修改完的laoyout.ejs应和下面类似

<% if(theme.style == "night"){ %>
  <link rel="stylesheet" href="/css/night-theme.css">
<% }else if(theme.style == "maiden"){ %>
  <link rel="stylesheet" href="/css/maiden-theme.css">
<% }else if(theme.style == "new"){ %>
  <link rel="stylesheet" href="/css/new-theme.css">
<% }else{ %>
  <link rel="stylesheet" href="/css/full-theme.css">
<% } %>

修改后,在主题的配置文件中/themes/particle/_config.yml中修改style配置项就可以切换新样式了

style: new

写在最后

本项目采用 MIT 开源许可证,欢迎大家贡献,你可以随意打开一个 issue 来进行提问,有任何改进想法都可以进行 fork,等待您的 Pull Request。